<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－地图点击事件</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=0bfd57475542d76f12578a701d2a70ab"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:100%}input,b,p{margin-left:5px;font-size:14px}</style>
    <style type="text/css">
        #maptype_displaybutton{
            position: absolute;
            background-color: white;
            opacity:0.9;
            width:60px;
            height:60px;
            right: 4px;
            top:4px;
            border-radius:5px;
            z-index: 900;
        }
        #maptype_displaybutton p{
            text-align: center;
        }
        #maptype_displaybutton p span{
            font-size:10px;
        }
        #maptype_displaybutton img{
            width:20px;
            height: 20px;
        }

        #maptype-maptypeDisplayDiv{
            position: absolute;
            background-color: white;
            z-index: 1100;
            width:285px;
            height:100px;
            right:65px;
            top:10px;
        }

        #maptype-maptypeDisplayDiv div{
            text-align: left;
        }
        #maptype-maptypeDisplayDiv div span{
            font-size:10px;
        }
        #maptype-maptypeDisplayDiv div img{
            width:70px;
        }
    </style>

    <script>
        var map;
        var zoom = 8;
        var lay;
		var lay1=null;
		var lay2=null;
		var lay3 =null;
		var lay4 =null;
		var lay5 =null;
		var lay6 =null;
		var lay7 =null;
        var onlyMapLay;
        var zoom = 17;
        var polygon, polygonclick;
        var marker;
        var selectedMarker;
        var newControl;

        function onLoad() {
           //天地图矢量
			var imageURL1="http://t0.tianditu.gov.cn/vec_c/wmts?tk=0bfd57475542d76f12578a701d2a70ab";
            lay1 = new T.TileLayer(imageURL1, {minZoom: 1, maxZoom: 18});
            //天地图矢量注记
			var imageURL2="http://t0.tianditu.gov.cn/cva_c/wmts?tk=0bfd57475542d76f12578a701d2a70ab";
            lay2 = new T.TileLayer(imageURL2, {minZoom: 1, maxZoom: 18});
            //天地图影像
            var imageURL3="http://t0.tianditu.gov.cn/img_w/wmts?tk=0bfd57475542d76f12578a701d2a70ab";
            lay3 = new T.TileLayer(imageURL3, {minZoom: 1, maxZoom: 18});
            //天地图影像注记
            var imageURL4="http://t0.tianditu.gov.cn/cia_c/wmts?tk=0bfd57475542d76f12578a701d2a70ab";
            lay4 = new T.TileLayer(imageURL4, {minZoom: 1, maxZoom: 18});
            //天地图地形
            var imageURL5="http://t0.tianditu.gov.cn/ter_c/wmts?tk=0bfd57475542d76f12578a701d2a70ab";
            lay5 = new T.TileLayer(imageURL5, {minZoom: 1, maxZoom: 18});
            //天地图地形注记
            var imageURL6="http://t0.tianditu.gov.cn/cta_c/wmts?tk=0bfd57475542d76f12578a701d2a70ab";
            lay6 = new T.TileLayer(imageURL6, {minZoom: 1, maxZoom: 18});
            //0.8米影像
            var imageURL7="https://fxpc.mem.gov.cn/data_preparation/171dd1d5-bbb3-483a-a7f6-50d6d98cee1f/4d481300-7a88-4b5b-9bb7-424ff6a5abea/wmts?service=WMTS&request=GetTile&version=1.0.0&layer=img08&style=default&tilematrixset=c&format=tiles&tilematrix={z}&tilerow={y}&tilecol={x}&geokey=94E99EB4FEB9B48CD5348F7BCF5BB620";
            lay7 = new T.TileLayer(imageURL7, {minZoom: 1, maxZoom: 18});
            var config = {
                projection: "EPSG:4326"
            };
            //初始化地图对象
            map = new T.Map("mapDiv",config);
            //加载按钮
            //initTaskToolsEvent();
        }

        function normal() {
            // centerAndZoom('','');
            //点击了位置复位，调用iOS或Android方法，把集合位置传递
            //window.androidObject.androidMarkerClick(e.lnglat.getLng()+"",e.lnglat.getLat()+"");
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

            if (isAndroid){
                window.androidObject.androidMarkerClick(e.lnglat.getLng()+"",e.lnglat.getLat()+"");
            }else if (isiOS){
                window.webkit.messageHandlers.AppModel.postMessage({'operation':'clickReset'});
            }
        }
        function createButton(html, title, className, container, csstext) {
            var link = document.createElement("img");
            if (container) {
                container.appendChild(link);
            }
            link.src="./MapPoint@2x.png";
            link.className="image";
            link.weight = 40;
            link.height = 40 ;
            return link;

        }
        function getLocation(clickLng,clickLat){
            //定位，获取位置
		var lo = new T.Geolocation();
		fn = function (e) {
			if (this.getStatus() == 0){
				//map.centerAndZoom(e.lnglat, 15)
				//alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)

				//var marker = new T.Marker(e.lnglat);
				//map.addOverLay(marker);
				//window.androidObject.androidMapClick(e.lnglat.getLng(),e.lnglat.getLat());
				window.androidObject.androidMapClick(clickLng,clickLat,e.lnglat.lng,e.lnglat.lat);
			}
			/*
			if(this.getStatus() == 1){
				map.centerAndZoom(e.lnglat, e.level)
				//alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
				var marker = new T.Marker(e.lnglat);
				map.addOverLay(marker);
			}
			*/
		}
		lo.getCurrentPosition(fn);
       }


        function addMarkerClick(marker) {
            //移除标注的点击事件，防止多次注册
            removeMarkerClick(marker);
            //注册标注的点击事件
            marker.addEventListener("click", MarkerClick);
        }

        function removeMarkerClick(marker) {
            //移除标注的点击事件
            marker.removeEventListener("click", MarkerClick);
        }

        function MarkerClick(e) {
            //alert(e.lnglat.getLng() + "," + e.lnglat.getLat());
            //点击了某个标注，调用iOS或Android方法，把集合位置传递
            //window.androidObject.androidMarkerClick(e.lnglat.getLng()+"",e.lnglat.getLat()+"");
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

            if (isAndroid)
            {
                window.androidObject.androidMarkerClick(e.lnglat.getLng()+"",e.lnglat.getLat()+"");
            }
            else if (isiOS)
            {

                window.webkit.messageHandlers.AppModel.postMessage({'operation':'clickPic','JingDu':e.lnglat.getLng()+"",'WeiDu':e.lnglat.getLat()+""});
            }
        }

        function addMapClick()
        {
            removeMapClick();
            map.addEventListener("click",MapClick);
        }

        function removeMapClick()
        {
            map.removeEventListener("click",MapClick);
        }

        function MapClick(e)
        {
            alert(e.lnglat.getLng()+","+e.lnglat.getLat());
            //addIconMarker(e.lnglat.getLng(),e.lnglat.getLat(),"http://api.tianditu.gov.cn/img/map/markerA.png");
            //addIconMarker(e.lnglat.getLng(),e.lnglat.getLat(),"images/markerA.png");
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

            if (isAndroid)
            {
                window.androidObject.androidMapClick(e.lnglat.getLng(),e.lnglat.getLat());
            }
            else if (isiOS)
            {

                window.webkit.messageHandlers.AppModel.postMessage({'operation':'clickPoint','JingDu':e.lnglat.getLng()+"",'WeiDu':e.lnglat.getLat()+""});
            }

        }

        function addMarker(lng,lat){
            //alert("js方法调用");
            //创建标注对象
            //map.centerAndZoom(new T.LngLat(lng, lat), zoom)
            var marker = new T.Marker(new T.LngLat(lng, lat));
            //向地图上添加标注
            map.addOverLay(marker);
        }
        function androidTest(){
            //alert("js方法调用");
        }

        function addIconMarker(lng,lat,url){
            //  alert("js addIconMarker方法调用");
            //创建图片对象
            var icon = new T.Icon({
                iconUrl: url,
                iconSize: new T.Point(15, 16),
                iconAnchor: new T.Point(7, 16)
            });
            //向地图上添加自定义标注
            var marker = new T.Marker(new T.LngLat(lng, lat), {icon: icon});
            map.addOverLay(marker);

            addMarkerClick(marker);//给标注添加点击事件
        }

        function onRange(params){
            //alert(params)
            var points = [];
            var lnglatarr = params.split(';');
            //alert(lnglatarr);
            for(var i=0, len = lnglatarr.length; i < len; i++){

                var lnglat = lnglatarr[i].split(',');
                var lng = lnglat[0];
                //alert(lng);
                var lat = lnglat[1];
                //alert(lng + ','+lat)
                if(i == (len-1)){
                    //alert('centerZoom'+'lng='+lng+' lat='+lat);
                    //map.centerAndZoom(new T.LngLat(lng+'', lat+''), zoom);
                }

                points.push(new T.LngLat(lng, lat));


            }
            //创建面对象
            polygon = new T.Polygon(points,{
                color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.0
            });
            //向地图上添加面
            map.addOverLay(polygon);
            addPolygonClick();

        }

        function centerAndZoom(lng,lat){
           //定位，获取位置
		    var lo = new T.Geolocation();
		    fn = function (e) {
                if (this.getStatus() == 0){
                    map.centerAndZoom(e.lnglat, 15)
                }

            }
            lo.getCurrentPosition(fn);
        }

        function addPolygonClick() {
            //移除面的点击事件，防止多次注册
            removePolygonClick();
            //注册面的点击事件
            polygon.addEventListener("click", PolygonClick);
        }

        function removePolygonClick() {
            //移除面的点击事件
            polygon.removeEventListener("click", PolygonClick);
        }

        function PolygonClick(e) {
            //alert(e.lnglat.getLng()+","+e.lnglat.getLat());
            //getLocation(e.lnglat.getLng(),e.lnglat.getLat());
            var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isAndroid)
            {
                window.androidObject.androidMapClick(e.lnglat.lng+"",e.lnglat.lat+"");
                //setPickLocation(e.lnglat.lng, e.lnglat.lat)
            }
            else if (isiOS)
            {
                window.webkit.messageHandlers.AppModel.postMessage({'operation':'clickPoint','JingDu':e.lnglat.getLng()+"",'WeiDu':e.lnglat.getLat()+""});
            }

        }

        function setPickLocation(lng, lat){
            //进行定位显示
            if(selectedMarker)
            {
               map.removeOverLay(selectedMarker);
            }

            //创建图片对象
            var icon = new T.Icon({
                iconUrl: "images/location.png",
                iconSize: new T.Point(40, 40),
                iconAnchor: new T.Point(20, 40)
            });

            //向地图上添加自定义标注
            selectedMarker = new T.Marker(new T.LngLat(lng,lat), {icon: icon});
            //selectedMarker = new T.Marker(new T.LngLat(lng, lat));

            map.addOverLay(selectedMarker);

            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(lng, lat), 18);
        }

        function setPhoneLocation(locationStr){
           	var lo = new T.Geolocation();
		    fn = function (e) {
			if (this.getStatus() == 0){
				//map.centerAndZoom(e.lnglat, 15)
				//alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
				if(marker){
					map.removeOverLay(marker);
				}
				marker = new T.Marker(e.lnglat);
				map.addOverLay(marker);
			}
			/*
			if(this.getStatus() == 1){
				map.centerAndZoom(e.lnglat, e.level)
				//alert("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
				var marker = new T.Marker(e.lnglat);
				map.addOverLay(marker);
			}
			*/
		}
		lo.getCurrentPosition(fn);
        }


        function initTaskToolsEvent()
    {
        $("#imgoperate-DisplayDivSelect").unbind("click");
        $("#imgoperate-DisplayDivSelect").click(function () {
            if ($("#imgoperate-DisplayDivSelect").attr("src") == "./images/maptype0.png"){
                $("#imgoperate-DisplayDivSelect").attr("src", "./images/maptype1.png");
                $("#maptype-maptypeDisplayDiv").css("display", "block");
            }else{
                $("#imgoperate-DisplayDivSelect").attr("src", "./images/maptype0.png");
                $("#maptype-maptypeDisplayDiv").css("display", "none");
            }
            $("#maptype-maptypeDisplayDiv").css("z-index", "1100");
        });
        $("#maptype1-DisplayImage").unbind("click");
        $("#maptype1-DisplayImage").click(function () {
            map.removeLayer(lay3);
            map.removeLayer(lay4);
            map.removeLayer(lay5);
            map.removeLayer(lay6);
            map.removeLayer(lay7);
            $("#maptype-maptypeDisplayDiv").css("display", "none");
            $("#imgoperate-DisplayDivSelect").attr("src", "./images/maptype0.png");
        });
        $("#maptype2-DisplayImage").unbind("click");
        $("#maptype2-DisplayImage").click(function () {
            map.removeLayer(lay5);
            map.removeLayer(lay6);
            map.removeLayer(lay7);
            map.addLayer(lay3);
            map.addLayer(lay4);
            $("#maptype-maptypeDisplayDiv").css("display", "none");
            $("#imgoperate-DisplayDivSelect").attr("src", "./images/maptype0.png");
        });
        $("#maptype3-DisplayImage").unbind("click");
        $("#maptype3-DisplayImage").click(function () {
            map.removeLayer(lay3);
            map.removeLayer(lay4);
            map.removeLayer(lay7);
            map.addLayer(lay5);
            map.addLayer(lay6);
            $("#maptype-maptypeDisplayDiv").css("display", "none");
            $("#imgoperate-DisplayDivSelect").attr("src", "./images/maptype0.png");
        });
        $("#maptype4-DisplayImage").unbind("click");
        $("#maptype4-DisplayImage").click(function () {
            map.removeLayer(lay3);
            map.removeLayer(lay4);
            map.removeLayer(lay5);
            map.removeLayer(lay6);
            map.addLayer(lay7);
            $("#maptype-maptypeDisplayDiv").css("display", "none");
            $("#imgoperate-DisplayDivSelect").attr("src", "./images/maptype0.png");
        });
    }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<!--<div id="maptype_displaybutton">-->
<!--<input type="button" id="button-maptypeDisplayDiv" style='width:50px;height:25px;cursor:pointer;margin-right:5px;margin-top:2px;font-size:14px;float:right;text-align: center;border-radius: 5px;border:1px solid #3B49EE;color:#3B49EE;' value="底图" />-->
<!--    <img style='cursor:pointer;width:60px;height:60px;' id="imgoperate-DisplayDivSelect" title="底图选择" src="./images/maptype0.png"/>-->
<!--</div>-->
<div id="maptype-maptypeDisplayDiv" style="display:none">
    <div id="maptype1-DisplayDiv" class="maptypeselect" align="left"
         style="margin-left:18px;margin-right:10px;float:left"><img id="maptype1-DisplayImage"
                                                                    style='cursor:pointer;display:block;margin-top: 8px;'
                                                                    title="地图"
                                                                    src="./images/vec.jpg"><br/><span
            id="maptype1-DisplayName"
            style='text-align: center;display:block;font-size:14px;'>标准地图</span></div>
    <div id="maptype2-DisplayDiv" class="maptypeselect" align="left"
         style="margin-left:10px;margin-right:10px;float:left"><img id="maptype2-DisplayImage"
                                                                    style='cursor:pointer;display:block;margin-top: 8px;'
                                                                    title="影像"
                                                                    src="./images/img.jpg"><br/><span
            id="maptype2-DisplayName"
            style='text-align: center;display:block;font-size:14px;'>影像地图</span></div>
    <div id="maptype3-DisplayDiv" class="maptypeselect" align="left"
         style="margin-left:10px;margin-right:10px;float:left"><img id="maptype3-DisplayImage"
                                                                    style='cursor:pointer;display:block;margin-top: 8px;'
                                                                    title="地形"
                                                                    src="./images/ter.jpg"><br/><span
            id="maptype3-DisplayName"
            style='text-align: center;display:block;font-size:14px;'>地形地图</span></div>
</div>
</body>
</html>
